<style>
.upload-thumb{
	display:block !important;
	float:left;
	width:147px !important;
	height:147px !important;
	position:relative;
}
.upload-thumb img{
	width:100%;
	height:100%;
}
.img-box{
	overflow:hidden;
}
.off-box{
	position:absolute;
	width:18px;
	height:18px;
	right:0;
	top:0;
	line-height: 18px;
	background-color:#FFF;
	cursor:pointer;
}
.black-bg{
	position:absolute;
	right:0;
	top:0;
	left:0;
	bottom:0;
	background-color:rgba(0,0,0,0.3);	
}
.img-error{
	color:red;
	height:25px;
	line-height:25px;
	display:none;
}
</style>
<script src="ADMIN_JS/drag-arrange.js" type="text/javascript" charset="utf-8"></script>
<script src="ADMIN_JS/ajax_file_upload.js" type="text/javascript"></script> 
<script type="text/javascript" src="__STATIC__/js/jquery.ui.widget.js" charset="utf-8"></script>
<script type="text/javascript" src="__STATIC__/js/jquery.fileupload.js" charset="utf-8"></script>

<input type="hidden" id="album_id"value="{foreach $album_list as $vo} {if condition="$vo['is_default'] eq '1'"}{$vo.album_id}	{/if} {/foreach}"/>
<script type="text/javascript">
$(function() {
	//给图片更换位置事件
	$('.draggable-element').arrangeable();
  	
  	var album_id = $("#album_id").val();
  	var dataAlbum = {
  			"album_id" : album_id,
  			"type" : "1,2,3,4",
  			'file_path' : UPLOADGOODS
  		};
    // ajax 上传图片
    var upload_num = 0; // 上传图片成功数量
    $('#fileupload').fileupload({
        url: 'ADMIN_MAIN/upload/photoalbumupload',
        dataType: 'json',
        formData:dataAlbum,
        add: function (e,data) {
        	$(".img-error").hide();
        	$("#default_uploadimg").remove();
        	//显示上传图片框
        	var html = "";
        	$.each(data.files, function (index, file) {
        		html +='<div class="upload-thumb draggable-element"  nstype="' + file.name + '">'; 
        		html +='<img nctype="goods_image" src="ADMIN_IMG/album/uoload_ing.gif">';  
        		html +='<input type="hidden"  class="upload_img_id" nctype="goods_image" value="">'; 
        		html +='<div class="black-bg hide">'; 
        		html +='<div class="off-box">&times;</div>'; 
            	html +='</div>'; 
        		html +='</div>'; 
            });
            $(html).appendTo('.img-box');
          //模块可拖动事件
        	$('.draggable-element').arrangeable();
        	data.submit();    	
        },
        done: function (e,data) {
        	var param = data.result;
            $this = $('div[nstype="' + param.origin_file_name + '"]');
           if(param.state > 0){
	           	$this.removeAttr("nctype");
	           	$this.children("img").attr("src","__UPLOAD__/"+param.file_name);
	           	$this.children("input[type='hidden']").val(param.file_id);           	
            }else{
            	$this.remove();
            	$(".img-error").text("请检查您上传的文件是否有误").show();               	
            }                   
        }      
    })

    //图片幕布出现
    $(".draggable-element").live('mouseenter',function(){  
    	  $(this).children(".black-bg").show();
    });
  	//图片幕布消失
    $(".draggable-element").live('mouseleave',function(){    	
  	  $(this).children(".black-bg").hide();
  	});
  	//删除页面图片元素
    $(".off-box").live('click',function(){ 
    	if($(".img-box .upload-thumb").length == 1){
    		var html = "";
    		html +='<div class="upload-thumb" id="default_uploadimg">';
    		html +='<img nctype="goods_image" src="ADMIN_IMG/album/default_goods_image_240.gif">';
    		html +='<input type="hidden" name="image_path" id="image_path" nctype="goods_image" value="">';      
    		html +='</div>';
    		$(html).appendTo('.img-box');
    	}
    	$(this).parent().parent().remove();           
  	});

});
function img_upload(){
	
}
</script>